<template>
	<view class="content">
		<swiper class="swiper" circular :duration="duration" :indicatorDots="indicatorDots"
			indicator-color='rgba(235, 235, 235, 1)' indicator-active-color='rgba(81, 213, 128, 1)'
			@change='swiperChange'>
			<swiper-item>
				<view class="fontSize-26 color-666">
					<view class="">
						编码：{{wordInfo.bh}}
					</view>
					<view class="">
						出处：{{wordInfo.book_name}}
					</view>
				</view>
				<view class="width-686 paddingBottom-100 borderRadius-30 paddingLeft-20 paddingRight-20 box-sizing"
					style="background: #F1FCF5;margin: 0 auto; margin-top: 40rpx;overflow: hidden;">
					<view class="flex flex-center items-center marginTop-50">
						<view class="fontSize-60 weight-700 color-333">
							{{wordInfo.wordHead}}
						</view>
						<image src="../../static/big.png" mode="" class="width-40 height-40 marginLeft-16"
							v-if="wordInfo.is_biger==1"></image>
					</view>
					<view class="borderRadius-46 color-white fontSize-26 width-110 height-52" v-if="wordInfo.labels!=''"
						style="background: #666;margin: 0 auto;margin-top: 16rpx;text-align: center;line-height: 52rpx;">
						{{wordInfo.labels}}
					</view>
					<view class="flex flex-center items-center marginTop-16">
						<image src="../../static/voice-img.png" mode="" style="width: 44rpx; height: 44rpx;"></image>
						<view class="fontSize-26 color-333 marginLeft-10">
							{{wordInfo.phone}}
						</view>
					</view>
					<view class="marginTop-92 flex space-between items-center flex-wrap">
						<view
							class="width-206 height-100 colorBj-fff text-center borderRadius-20 marginBottom-14 wordItem fontSize-28"
							v-for="(item,index) in wordInfo.tran"
							:style="{ border: item.tranCn == wordInfo.word_Scn? '2rpx solid #51D580' : 'none' }">
							{{item.tranCn}}
						</view>
						<view class="width-206 height-100" v-if='wordInfo.tran.length % 3 == 2'>

						</view>
					</view>
				</view>
				<view
					class="width-686 height-182 borderRadius-30 paddingLeft-20 paddingRight-20 box-sizing flex space-between items-center"
					style="background: #F1FCF5;margin: 0 auto; margin-top: 20rpx;overflow: hidden;">
					<view class="text-center" style="width: 24%;">
						<view class="fontSize-44 color-333">
							{{wordInfo.click_num}}
						</view>
						<view class="fontSize-28 color-666 marginTop-10">
							点击次数
						</view>
					</view>
					<view class="text-center" style="width: 24%;">
						<view class="fontSize-44 color-333">
							{{wordInfo.rem_count}}
						</view>
						<view class="fontSize-28 color-666 marginTop-10">
							记住次数
						</view>
					</view>
					<view class="text-center" style="width: 24%;">
						<view class="fontSize-44 color-333">
							{{wordInfo.unrem_count}}
						</view>
						<view class="fontSize-28 color-666 marginTop-10">
							忘记次数
						</view>
					</view>
					<view class="text-center" style="width: 24%;">
						<view class="fontSize-44 color-333">
							{{wordInfo.search_num}}
						</view>
						<view class="fontSize-28 color-666 marginTop-10">
							查询次数
						</view>
					</view>

				</view>



			</swiper-item>
			<swiper-item v-for="(item,index) in wordList.length-1" :key="index">
				<view class="fontSize-26 color-666">
					<view class="">
						编码：{{wordInfo.bh}}
					</view>
					<view class="">
						出处：{{wordInfo.book_name}}
					</view>
				</view>
				<view class="width-686  borderRadius-30 paddingLeft-20 paddingRight-20 box-sizing paddingBottom-100"
					style="background: #F1FCF5;margin: 0 auto; margin-top: 40rpx;overflow: hidden;">
					<view class="flex flex-center items-center marginTop-50">
						<view class="fontSize-60 weight-700 color-333">
							{{wordInfo.wordHead}}
						</view>
						<image src="../../static/big.png" mode="" class="width-40 height-40 marginLeft-16"
							v-if="wordInfo.is_biger==1"></image>
					</view>
					<view class="borderRadius-46 color-white fontSize-26 width-110 height-52" v-if="wordInfo.labels!=''"
						style="background: #666;margin: 0 auto;margin-top: 16rpx;text-align: center;line-height: 52rpx;">
						{{wordInfo.labels}}
					</view>
					<view class="flex flex-center items-center marginTop-16">
						<image src="../../static/voice-img.png" mode="" style="width: 44rpx; height: 44rpx;"></image>
						<view class="fontSize-26 color-333 marginLeft-10">
							{{wordInfo.phone}}
						</view>
					</view>
					<view class="marginTop-92 flex space-between items-center flex-wrap">
						<view
							class="width-206 height-100 colorBj-fff text-center borderRadius-20 marginBottom-14 wordItem fontSize-28"
							v-for="(item,index) in wordInfo.tran"
							:style="{ border: item.tranCn == wordInfo.word_Scn? '2rpx solid #51D580' : 'none' }">
							{{item.tranCn}}
						</view>
						<view class="width-206 height-100" v-if='wordInfo.tran.length % 3 == 2'>

						</view>
					</view>
				</view>
				<view
					class="width-686 height-182 borderRadius-30 paddingLeft-20 paddingRight-20 box-sizing flex space-between items-center"
					style="background: #F1FCF5;margin: 0 auto; margin-top: 20rpx;overflow: hidden;">
					<view class="text-center" style="width: 24%;">
						<view class="fontSize-44 color-333">
							{{wordInfo.click_num}}
						</view>
						<view class="fontSize-28 color-666 marginTop-10">
							点击次数
						</view>
					</view>
					<view class="text-center" style="width: 24%;">
						<view class="fontSize-44 color-333">
							{{wordInfo.rem_count}}
						</view>
						<view class="fontSize-28 color-666 marginTop-10">
							记住次数
						</view>
					</view>
					<view class="text-center" style="width: 24%;">
						<view class="fontSize-44 color-333">
							{{wordInfo.unrem_count}}
						</view>
						<view class="fontSize-28 color-666 marginTop-10">
							忘记次数
						</view>
					</view>
					<view class="text-center" style="width: 24%;">
						<view class="fontSize-44 color-333">
							{{wordInfo.search_num}}
						</view>
						<view class="fontSize-28 color-666 marginTop-10">
							查询次数
						</view>
					</view>

				</view>
			</swiper-item>


		</swiper>

	</view>

</template>

<script setup>
	import {
		ref,
		inject,
		onMounted,
		reactive
	} from 'vue';
	import {
		onLoad,
		onUnload,
	} from '@dcloudio/uni-app';
	const status = ref(1)
	const wordReportApi = inject("wordReport");
	const page = ref(1);
	const big_sort = ref(1);
	const small_sort = ref(1);
	const indicatorDots = ref(true)
	const duration = ref(500)
	const current = ref(0)
	const wordInfo = ref({})
	const wordList = ref([])


	onLoad((op) => {
		page.value = op.page;
		big_sort.value = op.big_sort;
		small_sort.value = op.small_sort;

		wordReportApi({
			page: page.value,
			big_sort: big_sort.value,
			small_sort: small_sort.value,
			wordId: ''
		}).then(res => {
			console.log(res)
			wordInfo.value = res.wordInfo
			wordList.value = res.wordList
		})
	})
	const swiperChange = (e) => {
		current.value = e.detail.current
		wordReportApi({
			page: page.value,
			big_sort: big_sort.value,
			small_sort: small_sort.value,
			wordId: wordList.value[current.value]
		}).then(res => {
			console.log(res)
			wordInfo.value = res.wordInfo
		})

	}
</script>

<style scoped lang="scss">
	.content {
		width: 100%;
		height: 100vh;
		position: relative;
		overflow: hidden;
		padding: 32rpx;
		box-sizing: border-box;
	}

	.swiper {
		height: 90vh;
	}

	.wordItem {
		line-height: 100rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>